<template>
    
        <el-dialog
        v-model="showflag"
        title="运单详情"
        width="30vw"
        align-center
        :close-on-click-modal="false"
        @close="showflag = false">
        <div style="padding: 0 10px">
            <div class="boxbox">
                <div class="lineboxx">
                    <div class="linename">转运日期：</div>
                    <div class="linevalue">
                        {{ changetime(ruleForm.saleTime) }}
                    </div>
                </div>
                <div class="lineboxx">
                    <div class="linename">接收单位：</div>
                    <div class="linevalue">
                        {{ ruleForm.danwei_name }}
                    </div>
                </div>
                <div class="lineboxx">
                    <div class="linename">运单状态：</div>
                    <div
                        class="linevalue"
                        :style="{
                            color:
                                ruleForm.ordertype == 1 ? '#F07800' : '#00F000',
                        }">
                        {{ ruleForm.ordertype == 1 ? "待确定" : "已完成" }}
                    </div>
                </div>
                <div class="lineboxx">
                    <div class="linename">合计重量：</div>
                    <div class="linevalue">
                        {{ ruleForm.product_num }}
                    </div>
                </div>
                <div class="boxfff">
                    <div class="lineboxx">
                        <div class="linename">废品种类</div>
                        <div class="linevalue">废品重量</div>
                    </div>
                    <div
                        class="lineboxx"
                        v-for="(item2, index2) in ruleForm.ordergoods"
                        :key="index2">
                        <div class="linename" style="color: #333333">
                            {{ item2.product_name }}
                        </div>
                        <div class="linevalue" style="color: #333333">
                            {{ item2.product_num }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="showflag = false">关闭</el-button>
                <el-button v-if="ruleForm.ordertype==1" type="success" @click="finish">已完成</el-button>
            </div>
        </template>
    </el-dialog>
    
    
</template>

<script setup lang="ts">
import { onMounted, ref, provide, reactive, toRaw, inject } from "vue";
import { post, baseURL } from "../../../../api/request";
import type { FormInstance, FormRules } from "element-plus";
import { ElMessage, ElMessageBox } from "element-plus";
let showflag = ref(false);
const props = defineProps({
  ruleForm: Object
});

const getdata = inject<() => void>("getdata")!; //父组件的方法

const finish = () => {
    ElMessageBox.confirm("请确认是否已完成?", "提示", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "warning",
    })
        .then(() => {
            let obj = JSON.parse(JSON.stringify(props.ruleForm))
            obj.ordertype = 2;
            post({
                url: "/api/order/edit",
                data: toRaw(obj),
            }).then((res: any) => {
                ElMessage.success("操作成功");
                showflag.value = false;
                getdata();
            });
        })
        .catch(() => {});
};

const changetime = (timestamp: Number) => {
    let date = new Date(timestamp * 1000);
    let year = date.getFullYear();
    let month = date.getMonth() + 1;
    let day = date.getDate();
    let hours = date.getHours();
    let minutes = date.getMinutes();
    let seconds = date.getSeconds();

    month = month < 10 ? "0" + month : month;
    day = day < 10 ? "0" + day : day;
    hours = hours < 10 ? "0" + hours : hours;
    minutes = minutes < 10 ? "0" + minutes : minutes;
    seconds = seconds < 10 ? "0" + seconds : seconds;

    return (
        year +
        "-" +
        month +
        "-" +
        day +
        " " +
        hours +
        ":" +
        minutes +
        ":" +
        seconds
    );
};

// 通过 defineExpose 暴露给父组件
defineExpose({
    showflag
});
</script>

<style lang="scss" scoped>
:deep(.el-form-item) {
    margin-bottom: 30px;
    width: 100%;
}
.linebox {
    display: flex;
    align-items: flex-start;
    width: 100%;
}
:deep(.avatar-uploader .avatar) {
    width: 178px;
    height: 178px;
    display: block;
}
:deep(.avatar-uploader .el-upload) {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

:deep(.avatar-uploader .el-upload:hover) {
    border-color: var(--el-color-primary);
}

:deep(.el-icon.avatar-uploader-icon) {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
}

.boxbox {
    width: 100%;
    padding: 9px 15px;
    background-color: #eef7fa;
    border-radius: 5px;
    margin-top: 12px;
    .lineboxx {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 6px;
        .linename {
            color: #7b8189;
            font-size: 13px;
        }
        .linevalue {
            color: #464646;
            font-size: 13px;
        }
    }
    .boxfff {
        width: 100%;
        padding: 10px;
        background-color: #fff;
        border-radius: 3px;
        .linename {
            flex: 1;
            color: #7b8189;
            font-size: 13px;
            text-align: center;
        }
        .linevalue {
            color: #464646;
            font-size: 13px;
            flex: 1;
            text-align: center;
        }
    }
}
</style>
